'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from "framer-motion";
import { ShoppingCartIcon, HeartIcon } from "@heroicons/react/24/outline";
import { Button, Rate, Badge } from 'antd';

// Mock数据 - 实际项目中应从API获取
const mockProducts = [
  {
    id: 1,
    name: "时尚运动鞋",
    price: 599,
    originalPrice: 799,
    discount: 25,
    rating: 4.8,
    reviewCount: 128,
    image: "/product1.jpg",
    isFavorite: false,
    isNew: true,
    category: "electronics"
  },
  {
    id: 2,
    name: "无线蓝牙耳机",
    price: 299,
    originalPrice: 399,
    discount: 25,
    rating: 4.6,
    reviewCount: 96,
    image: "/product2.jpg",
    isFavorite: true,
    isNew: false,
    category: "electronics"
  },
  {
    id: 3,
    name: "智能手表",
    price: 1299,
    originalPrice: 1599,
    discount: 19,
    rating: 4.9,
    reviewCount: 256,
    image: "/product3.jpg",
    isFavorite: false,
    isNew: true,
    category: "electronics"
  },
  {
    id: 4,
    name: "背包",
    price: 199,
    originalPrice: 299,
    discount: 33,
    rating: 4.5,
    reviewCount: 87,
    image: "/product4.jpg",
    isFavorite: false,
    isNew: false,
    category: "clothing"
  }
];

const categoryInfo = {
  electronics: { name: "电子产品", icon: "📱" },
  clothing: { name: "服装", icon: "👕" },
  home: { name: "家居", icon: "🏠" },
  sports: { name: "运动", icon: "⚽" },
  beauty: { name: "美妆", icon: "💄" },
  food: { name: "食品", icon: "🍎" }
};

// 产品卡片组件
function ProductCard({ product }) {
  const [isFavorite, setIsFavorite] = useState(product.isFavorite);
  
  return (
    <motion.div
      className="border border-gray-200 rounded-lg hover:shadow-lg transition-shadow relative"
      whileHover={{ y: -5 }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      {product.isNew && (
        <Badge.Ribbon text="新品" color="red">
          <div className="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
            新品
          </div>
        </Badge.Ribbon>
      )}
      <button 
        className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100"
        onClick={() => setIsFavorite(!isFavorite)}
      >
        <HeartIcon className={`h-5 w-5 ${isFavorite ? 'text-red-500 fill-current' : 'text-gray-400'}`} />
      </button>
      
      <div className="aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center">
        <span className="text-4xl">{product.image}</span>
      </div>
      
      <div className="p-4">
        <h3 className="font-medium text-gray-900 truncate">{product.name}</h3>
        
        <div className="flex items-center mt-1">
          <Rate disabled defaultValue={Math.floor(product.rating)} allowHalf />
          <span className="text-xs text-gray-500 ml-1">({product.reviewCount})</span>
        </div>
        
        <div className="flex items-center mt-2">
          <span className="text-lg font-bold text-gray-900">¥{product.price}</span>
          {product.originalPrice > product.price && (
            <>
              <span className="text-sm text-gray-500 line-through ml-2">¥{product.originalPrice}</span>
              <span className="text-sm font-medium text-red-500 ml-2">-{product.discount}%</span>
            </>
          )}
        </div>
        
        <div className="mt-4 flex space-x-2">
          <Button 
            type="primary" 
            className="flex-1 flex items-center justify-center"
            icon={<ShoppingCartIcon className="h-4 w-4 mr-1" />}
          >
            加入购物车
          </Button>
          <Button 
            icon={<HeartIcon className="h-4 w-4" />}
            onClick={() => setIsFavorite(!isFavorite)}
          />
        </div>
      </div>
    </motion.div>
  );
}

// 分类页面组件
export default function CategoryPage({ params }) {
  const router = useRouter();
  const { id } = params;
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    // 模拟从API获取数据
    const filteredProducts = mockProducts.filter(product => product.category === id);
    setProducts(filteredProducts);
  }, [id]);

  const category = categoryInfo[id] || { name: "未知分类", icon: "📦" };

  return (
    <div className="min-h-screen flex flex-col">
      {/* 页面主要内容 */}
      <main className="flex-grow">
        {/* 分类标题区域 */}
        <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-12">
          <div className="container mx-auto px-4">
            <div className="flex items-center justify-center">
              <span className="text-4xl mr-4">{category.icon}</span>
              <h1 className="text-3xl md:text-4xl font-bold">{category.name}</h1>
            </div>
            <p className="text-center mt-4 text-blue-100">
              浏览所有 {category.name} 商品
            </p>
          </div>
        </section>

        {/* 商品列表 */}
        <section className="py-12">
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-2xl font-bold">
                {category.name} <span className="text-gray-500 text-lg">({products.length} 件商品)</span>
              </h2>
              <div className="flex space-x-2">
                <select className="border border-gray-300 rounded px-3 py-1 text-sm">
                  <option>默认排序</option>
                  <option>价格从低到高</option>
                  <option>价格从高到低</option>
                  <option>最新上架</option>
                  <option>销量最高</option>
                </select>
              </div>
            </div>
            
            {products.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-gray-500 text-lg">暂无商品</p>
                <Button 
                  type="primary" 
                  className="mt-4"
                  onClick={() => router.push('/')}
                >
                  返回首页
                </Button>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {products.map((product, index) => (
                  <motion.div
                    key={product.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <ProductCard product={product} />
                  </motion.div>
                ))}
              </div>
            )}
          </div>
        </section>
      </main>
    </div>
  );
}